<template>
  <div class="lazyLoad">
    <ul>
      <li v-for="img in imgList" :key="img">
        <img  class="lazyImg" v-lazy="img" />
      </li>
    </ul>
  </div>
</template>

<script>
import { getImg } from "@/api/test.js";
export default {
  data: function () {
    return { imgList: [] };
  },
  methods: {
    async init() {
      const { data: res, ok } = await getImg();
      if (ok && res && res.length) {
        this.imgList = res;
      }
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.lazyLoad {
  overflow: scroll;
  height: 100%;
  width: 100%;
  .lazyImg {
    width: 300px;
    height: 300px;
  }
}
</style>
